import { useState, useRef } from 'react'
import html2canvas from 'html2canvas'
import SignatureEditor from './components/SignatureEditor'
import ControlPanel from './components/ControlPanel'

function App() {
  const [settings, setSettings] = useState({
    text: '这是我的个性签名\n祝您生活愉快！',
    backgroundColor: '#f3f4f6',
    backgroundImage: null,
    textColor: '#000000',
    fontSize: 18,
    textAlign: 'center',
    fontFamily: 'Arial',
    padding: 20,
  })

  const signatureRef = useRef(null)

  const handleChange = (newSettings) => {
    setSettings({ ...settings, ...newSettings })
  }

  const handleBackgroundImageChange = (e) => {
    const file = e.target.files[0]
    if (file) {
      const reader = new FileReader()
      reader.onload = (e) => {
        handleChange({ backgroundImage: e.target.result })
      }
      reader.readAsDataURL(file)
    }
  }

  const downloadSignature = () => {
    if (!signatureRef.current) return
    
    html2canvas(signatureRef.current).then(canvas => {
      const link = document.createElement('a')
      link.download = '我的签名.png'
      link.href = canvas.toDataURL('image/png')
      link.click()
    })
  }

  return (
    <div className="min-h-screen bg-gray-100 py-8 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto">
        <header className="text-center mb-10">
          <h1 className="text-3xl font-bold text-gray-900">签名生成器</h1>
          <p className="mt-2 text-gray-600">定制您的个性化签名档</p>
        </header>

        <div className="bg-white shadow rounded-lg overflow-hidden">
          <div className="md:flex">
            <div className="md:w-1/2 p-6 border-r border-gray-200">
              <h2 className="text-lg font-medium text-gray-900 mb-4">预览</h2>
              <div className="border border-gray-300 rounded-lg overflow-hidden">
                <SignatureEditor ref={signatureRef} settings={settings} />
              </div>
              <button 
                className="btn mt-4 w-full"
                onClick={downloadSignature}
              >
                下载签名
              </button>
            </div>
            
            <div className="md:w-1/2 p-6">
              <h2 className="text-lg font-medium text-gray-900 mb-4">控制面板</h2>
              <ControlPanel 
                settings={settings} 
                onChange={handleChange}
                onBackgroundImageChange={handleBackgroundImageChange}
              />
            </div>
          </div>
        </div>
        
        <footer className="mt-8 text-center text-sm text-gray-500">
          <p>© 2025 YuSloane. 保留所有权利。</p>
        </footer>
      </div>
    </div>
  )
}

export default App 